<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Code')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-code" data-rule="required" class="form-control" name="row[code]" type="text" value="{$row.code|htmlentities}" readonly>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">社区盒子宽度:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-boxwidth" data-rule="required" class="form-control" name="row[boxwidth]" value="{$row.boxwidth}" type="text">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Day')}:</label>
        <div class="col-xs-12 col-sm-8">
            <select id="c-day" data-rule="required" class="form-control selectpicker" name="row[day][]" multiple data-live-search="true" data-style="btn-info">
                {php}
                $row['day'] = explode(',', $row['day']);
                for($i = 1; $i <= 31; $i++) {
                $selected = in_array($i, $row['day']) ? ' selected' : '';
                echo '<option value=\"'.$i.'\"'.$selected.'>'.$i.'</option>';
                }
                {/php}
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Start_time')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-start_time" data-rule="required" class="form-control datetimepicker" data-date-format="HH:mm" data-use-current="true" name="row[start_time]" type="text" value="{$row.start_time}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('End_time')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-end_time" data-rule="required" class="form-control datetimepicker" data-date-format="HH:mm" data-use-current="true" name="row[end_time]" type="text" value="{$row.end_time}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Community_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <select id="c-community_id" data-rule="required" class="form-control selectpicker" name="row[community_id]">
                {foreach name="communityList" item="vo" key="k"}
                <option value="{$k}" {if $k==$row.community_id}selected{/if}>{$vo}</option>
                {/foreach}
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Publicwelfare_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <select id="c-publicwelfare_id" data-rule="required" class="form-control selectpicker" name="row[publicwelfare_id]">
                {foreach name="publicwelfareList" item="vo" key="k"}
                <option value="{$k}" {if $k==$row.publicwelfare_id}selected{/if}>{$vo}</option>
                {/foreach}
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Remark')}:</label>
        <div class="col-xs-12 col-sm-8">
            <textarea id="c-remark" class="form-control" name="row[remark]" rows="5">{$row.remark|htmlentities}</textarea>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Status')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:build_radios('row[status]', ['1'=>__('Status 1'), '0'=>__('Status 0')], $row.status)}
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Weigh')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-weigh" class="form-control" name="row[weigh]" type="number" value="{$row.weigh}">
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>

<!-- 添加JavaScript代码，实现开始时间变更后结束时间自动计算 -->
<script>
    // 使用原生JavaScript实现时间计算功能
    document.addEventListener('DOMContentLoaded', function() {
        setupTimeslotCalculation();
        
        // 确保datetimepicker使用正确的格式（不带秒）
        require(['bootstrap-datetimepicker'], function () {
            $('.datetimepicker').each(function() {
                var format = $(this).data('date-format') || 'HH:mm';
                $(this).datetimepicker({
                    format: format,
                    showTodayButton: true,
                    showClose: true
                });
            });
        });
    });
    
    // 确保即使文档已经加载完成也会执行
    if (document.readyState === 'complete' || document.readyState === 'interactive') {
        setupTimeslotCalculation();
    }
    
    // 设置时间槽计算函数 - 使用原生JavaScript
    function setupTimeslotCalculation() {
        // 获取元素
        var startTimeInput = document.getElementById('c-start_time');
        var endTimeInput = document.getElementById('c-end_time');
        
        if (!startTimeInput || !endTimeInput) {
            return;
        }
        
        // 禁用结束时间输入框
        endTimeInput.setAttribute('readonly', 'readonly');
        
        // 计算结束时间函数
        function calculateEndTime() {
            var startTimeVal = startTimeInput.value;
            
            if (startTimeVal) {
                // 处理时间字符串
                var timeParts = startTimeVal.split(':');
                if (timeParts.length < 2) {
                    return;
                }
                
                var hours = parseInt(timeParts[0]);
                var minutes = parseInt(timeParts[1]);
                
                // 添加45分钟
                minutes += 45;
                
                if (minutes >= 60) {
                    hours += Math.floor(minutes / 60);
                    minutes = minutes % 60;
                }
                if (hours >= 24) {
                    hours = hours % 24;
                }
                
                // 格式化时间（不带秒数）
                var endTimeVal = 
                    (hours < 10 ? '0' + hours : hours) + ':' + 
                    (minutes < 10 ? '0' + minutes : minutes);
                
                // 设置结束时间
                endTimeInput.value = endTimeVal;
            }
        }
        
        // 监听开始时间变化
        startTimeInput.addEventListener('change', function() {
            calculateEndTime();
        });
        
        startTimeInput.addEventListener('blur', function() {
            calculateEndTime();
        });
        
        startTimeInput.addEventListener('keyup', function() {
            calculateEndTime();
        });
        
        // 监听时间选择器点击
        document.addEventListener('click', function(e) {
            if (e.target && (e.target.closest('.datetimepicker-hours table td') || e.target.closest('.datetimepicker-minutes table td'))) {
                setTimeout(calculateEndTime, 100);
            }
        });
        
        // 监听输入框值变化
        var oldValue = startTimeInput.value;
        setInterval(function() {
            if (startTimeInput.value !== oldValue) {
                oldValue = startTimeInput.value;
                calculateEndTime();
            }
        }, 100);
        
        // 页面加载时计算
        calculateEndTime();
    }
</script>
